<template>
	<div class="goods" style="overflow: hidden">
		 <div class="menu-warapper" v-el:menu-warapper>
		 	<ul>
		 		<li v-for="item in goods" class="menu-item" :class="{'curren':currentIndex===$index}" @click="selectMenu($index,$event)">
		 			<span class="text border-1px" >
		 				<span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
		 			</span>
		 		</li>
		 	</ul>
		 </div>
   		 <div class="foods-warapper" v-el:foods-warapper>
   		 	<ul>
   		 		<li v-for="item in goods" class="food-list food-list-hook">
   		 			<h1 class="title test" id="test">{{item.name}}</h1>
   		 			<ul>
   		 				<li v-for="food in item.foods" class="food-item border-1px">
   		 					<div class="icon">
   		 						<img :src="food.icon" width="57" height="57">
   		 					</div>
   		 					<div class="content">
   		 						<h2 class="name">{{food.name}}</h2>
   		 						<p class="desc">{{food.description}}</p>
   		 						<div class="extar">
   		 							<span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
   		 						</div>
   		 						<div class="price">
   		 							<span class="now">￥{{food.price}}</span><span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
   		 						</div>
   		 					</div>
   		 				</li>
   		 			</ul>
   		 		</li>
   		 	</ul>
   		 </div>
	</div>

</template>
<script type="text/ecmascript-6">
  import BScroll from 'better-scroll';
  const ERR_OK = 0;
  export default {
    props: {
      sller: {
        type: Object
      }
    },
    data() {
      return {
        goods: [],
        listHeight: [],
        scrollY: 0
      };
    },
    computed: {
      currentIndex() {
        for (let i = 0; i < this.listHeight.length; i++) {
          let height1 = this.listHeight[i];
          let height2 = this.listHeight[i + 1];
          if (!height2 || (this.scrollY >= height1 && this.scrollY < height2)) {
            console.log(i);
            return i;
          }
        }
        return 0;
      }
    },
    created() {
      this.classMap = ['decrease', 'discount', 'guarante', 'invoice', 'special'];
      this.$http.get('/api/good').then((response) => {
        response = response.body;
        if (response.errno === ERR_OK) {
          this.goods = response.data;
          this.$nextTick(() => {
            this._initScroll();
            this._calculaterHeight();
          });
        }
      });
    },
    methods: {
      selectMenu(index, event) {
        if (!event._constructed) return;
        let foodList = this.$els.foodsWarapper.getElementsByClassName('food-list-hook');
        let el = foodList[index];
        console.log(el);
        console.log(this.foodsScroll);
        this.foodsScroll.scrollToElement(el, 300);
      },
      _initScroll() {
        this.meunScroll = new BScroll(this.$els.menuWarapper, {
          click: true
        });
        this.foodsScroll = new BScroll(this.$els.foodsWarapper, {
          probeType: 3
        });
        this.foodsScroll.on('scroll', (pos) => {
          this.scrollY = Math.abs(Math.round(pos.y));
        });
      },
      _calculaterHeight() {
        let foodList = this.$els.foodsWarapper.getElementsByClassName('food-list-hook');
        let height = 0;
        this.listHeight.push(height);
        for (let i = 0; i < foodList.length; i++) {
          let item = foodList[i];
          height += item.clientHeight;
        // console.log(height);
          this.listHeight.push(height);
        }
        console.log(this.listHeight);
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin.styl"
 	.goods
 		position:absolute
 		width:100%
 		top:174px
 		bottom:46px
 		display: flex
 		.menu-warapper
 			flex: 0 0 80px
 			width:80px
 			background: #f3f5f7
 			.menu-item
 				display:table
 				height:54px
 				width:56px
 				line-height:14px
 				padding:0 12px
				.text
					font-size:12px
					border-1px(rgba(7,17,27,0.1))
					display:table-cell
					width:56px
					vertical-align: middle
					.icon
						display: inline-block
						width:12px
						height:12px
						margin-right:2px
						vertical-align: top
						background-size: 12px 12px
						background-repeat:no-repeat
						&.decrease
							bg-image('decrease_3')
						&.discount
							bg-image('discount_3')
						&.guarante
							bg-image('guarantee_3')
						&.invoice
							bg-image('invoice_3')
						&.special
							bg-image('special_3')
  .foods-warapper
   flex:1
   .title
    padding-left:14px
    height:26px
    line-height:26px
    border-left:2px solid #d9dde1
    font-size:12px
    color:rgb(147,153,159)
    background: #f3f5f7
   .food-item
      display: flex
      padding-bottom: 18px
      margin:18px
      border-1px(rgba(7,17,27,0.1))
      &:last-child
          border-none()
          margin-bottom:0
      .icon
          flex:0 0 57px
          margin-right:10px
      .content
          flex:1
          .name
              margin:2px 0 8px 0
              line-height:14px
              font-size:14px
              height: 14px;
              color:rgb(7,17,27)
          .desc, .extar
              line-height:10px
              font-size:10px
              color:rgb(147,153,159)
          .desc
              margin-bottom:8px
              line-height:12px
          .extar
              .count
                  margin-right: 12px
          .price
              font-weight:700
              line-height:24px
              .now
                  margin-right:18px
                  font-size:14px
                  color:rgb(240,20,20)
              .old
                  texe-decoration:line-through
                  font-size:10px
.curren
  background: #fff
  position: relative
  z-index: 10
  margin-top: -1px
  font-weight: 700
  .text
    border-none()
</style>
